<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="showElement('hello')">show</button>
    <button onclick="add()">add</button>
    <script>
        /**
         * 需求：点击按钮只输出一次内容
         * */
        // 每次点击都会新增一个元素
        //   function showElement(msg) {
        //     const element = document.createElement("div");
        //     element.append(document.createTextNode(msg));
        //     document.body.append(element);
        //   }

        // 改成单例模式：以后每次点击都只会替换原来的内容
      //   改成单例模式的步骤：
          1.要先找出创建的代码
          2.再把创建的代码通过ifelse变成修改

          // 错误的写法
      function showElement(msg) {
            const element = document.createElement("div");
            element.append(document.createTextNode(msg));
            document.body.append(element);
            document.body.rep
        }

        // 正确的写法
        const showElement = (function () {
          let element = null;
          let textnode = null;
          let count = 0;
          return function (msg) {
            count++;

            if (!element) {
              // 新创建=创建新实例
              element = document.createElement("div");
              textnode = document.createTextNode(msg + count);
              element.append(textnode);
              document.body.appendChild(element);
            } else {
              // 替换
              textnode.replaceData(0, textnode.length, msg + count);
            }
          };
        })();

        // 声明时要先把闭包执行一次，后面再调用里面的返回的函数
      //   const add = (function (a) {
      //     console.log("a", a);
      //     // 这里只执行一次，后面调用就执行下面返回的函数
      //     return function () {
      //       a++;
      //       console.log("b", a);
      //     };
      //   })(0);
    </script>
  </body>
</html>
